<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { watch,ref } from 'vue';
import Dayjs from 'dayjs';
// 告警详情
import { getAiAlarm} from '#/api/moxi/aialarm';
import {
  Card,
  Descriptions,
  DescriptionsItem,
  Image,
} from 'ant-design-vue';
// 定义 props 接收 id
const alarmData = ref<any>();

const props = defineProps<{
    formData?: any;
}>();
// 监听 id 变化，当 id 传入时执行相关逻辑
watch(() => props.formData, async (formData) => {
    if (formData) {
        console.log('接收到的 formData:', formData);
        const res = await getAiAlarm(formData.id);
        alarmData.value = res;
        console.log('getAiAlarm:', res);
        
    }
}, { immediate: true });

</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">违规动作告警</span>
          </div>
        </template>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-2 text-xl font-medium">告警信息</span>
        </div>
        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="违规动作类型">{{ alarmData?.typeName }}</DescriptionsItem>
          <DescriptionsItem label="发生时间">
              <template v-if="alarmData?.alarmTime">
                {{ Dayjs(alarmData?.alarmTime).format('YYYY-MM-DD HH:mm:ss')}}
                </template>
           </DescriptionsItem>
          <DescriptionsItem label="违规描述"  :span="2">{{ alarmData?.alarmDesc }}</DescriptionsItem>
          <DescriptionsItem label="告警图片"  :span="2">
             <Image
          :width="300"
          :src="alarmData?.imageUrl"
        />
          </DescriptionsItem>

        </Descriptions>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">视频信息</span>
        </div>

      <video 
          width="640" 
          height="360" 
          controls
          :src="alarmData?.videoUrl"
        >
        </video>
      

      </Card>
    </div>
  </Page>
</template>
